<template>
	<view class="">
		<custom :title="gid?'群相册':'发布动态'" mode="2" fixed="fixed">
			<view @tap="onSubmit" slot="right" class="bg-all flex flex-x-y fs-26 publish-btn">
				发布
			</view>
		</custom>
		<!-- 编辑区 -->
		<view class="flex">
			<view class="flex-content">
				<view class="edit-box mt-20 br-20">
					<view class="write ">
						<textarea v-model="info.text" :placeholder="gid?'发布照片说明......':'分享新鲜事......'"
							placeholder-style="color:#999999;font-size:26rpx" style="width:100%;min-height:200rpx"
							maxlength="1000" />
					</view>
					<view class="media flex flex-wrap">
						<!-- 排列展示图片 -->
						<!-- <view class="mr-10 mb-10" style="position: relative;" v-for="(item,i) in info.images" :key="i">
							<image src="../../static/friend/shanchu.png" class="shanchu"
								style="width:30rpx;height:30rpx;" @tap.stop="onDelete(item.id)"></image>
							<image :src="item.url" style="width:150rpx;height:150rpx" mode="aspectFill"></image>
						</view> -->
						<!-- 添加图片的按钮 -->
						<!-- <view class="add-box flex flex-y flex-x-y" @tap="choose_image" v-if="isShow">
							<image src="../../static/friend/picture.png" style="width:34rpx;height:34rpx;"></image>
							<text class="fs-24 mt-10" style="color:#999999">图片</text>
						</view> -->
					</view>
				</view>

				<view class="mt-20 bg-FFFFFF br-20" style="padding: 6rpx 0 20rpx 20rpx;">
					<upload desc="图片" @change="chang_image" ref="upload" marginRight="16rpx" marginTop="14rpx"
						:length="8" width="150rpx" height="150rpx"></upload>
				</view>

			</view>
		</view>
		<toast ref="publishRef"></toast>
		<fixed-line></fixed-line>
		<common></common>
		<powers ref="powers"></powers>
	</view>
</template>

<script>
	import {
		upload_image
	} from '../../utils/util'
	import {
		addFriendCircle
	} from './api/friendCircle'
	export default {
		name: 'Publish',

		data() {
			return {
				info: {
					text: '',
					images: []
				},
				gid: '',
				isnull: false

			};
		},
		computed: {
			isShow() {
				return this.info.images.length < 9
			},
			submitImgs() {
				return this.info.images.map(item => item.url)
			}
		},
		onLoad(e) {
			if (e.gid) {
				this.gid = e.gid
				console.log(this.gid)
			}
		},
		methods: {
			onSubmit() {
				if (this.info.text === '' && this.info.images.length === 0) {
					this.isnull = true
					return this.showToast('请填写要发送的内容或图片！')
				}
				const config = {
					desc: this.gid ? '是否确认发布该条动态？' : '是否确认发布该条信友圈？',
					success: this.onPublish
				}
				this.$refs.publishRef.open(config)
			},
			async onPublish() {
				if (this.info.text === '' && this.info.images.length === 0) {
					this.isnull = true
					return this.showToast('请填写要发送的内容或图片！')
				}

				const {
					status
				} = await addFriendCircle({
					text: this.info.text,
					images: this.submitImgs
				})
				if (status === 200) {
					this.showToast('新增成功！')
					// uni.$emit('refresh')
					uni.$emit('init')
					this.toPage('/pages/friend/friend', 'switch')
				}

			},
			onDelete(id) {
				this.info.images = this.info.images.filter(item => item.id !== id)
			},
			chang_image(e) {
				console.log(e,'eeee')
				this.info.images = e.map(val => {
					console.log(val,'val')
					return {
						url: val.src,
						// videoSrc: val.videoSrc,
					}
				});
			},
			choose_image(type = 1, size = 800) {

				this.$refs.powers.open({
					powersType: 'POWERS_IMAGE',
					success: () => {
						////////////
						uni.chooseImage({
							sourceType: ['album'],
							success: res => {
								let {
									tempFilePaths = []
								} = res
								tempFilePaths.forEach(val => {
									upload_image(val, (res) => {
										let id = new Date().getTime().toString()
										if (this.info.images.length >= 9) {
											this.showToast('最多只能上传9张图片')
											return
										}
										this.info.images.push({
											id,
											url: res
										})
									});
									setTimeout(() => {
										this.isnull = false
									}, 200)

								})


							}
						})
						////////////
					}
				});


			},
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}

	.edit-box {
		padding: 20rpx;
		background-color: #fff;

	}

	.add-box {
		width: 150rpx;
		height: 150rpx;
		background-color: #F5F6F7;
	}

	.shanchu {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		z-index: 999;
	}

	.publish-btn {
		padding: 5rpx 25rpx;
		border-radius: 5rpx;
		transform: translateX(-60rpx);
		color: #fff;
	}

	.alert {
		width: 224rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #F34141;
		line-height: 34rpx;
	}
</style>